<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm
          v-show="showSearch"
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getList"
        ></SearchForm>
        <el-row :gutter="10" class="mb8">
          <!-- <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd"
              >新增</el-button
            >
          </el-col> -->
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="Download"
              @click="handleExport"
              >导出</el-button
            >
          </el-col>
          <!-- <el-col :span="1.5">
            <el-button type="warning" plain @click="handlePush()"
              >推送隐患数据</el-button
            >
          </el-col> -->
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <Table
          ref="table"
          :auto-featch="true"
          :fetch-data="fetchData"
          :options="options.table"
          actionWidth="100"
          @selectionChange="selectionChange"
        >
          <template #beforehiddenLevel>
            <el-table-column
              label="装置"
              prop="deviceId"
              align="center"
              width="150"
              key="deviceId"
              show-overflow-tooltip
            >
              <template #default="{ row }">
                {{ columnZz(row.deviceId) }}
              </template>
            </el-table-column>
          </template>
          <template #actionButton="{ row }">
            <el-button type="text" @click="handleEdit(row)">详情</el-button>
          </template>
        </Table>
        <DialogVform
          :formJson="formJson"
          ref="dialogVform"
          :slots="['fileSlot', 'zgqk', 'fhqk', 'deviceId']"
          @onSubmit="onSubmit"
          title="隐患登记"
          :showButton="false"
        >
          <template #deviceId>
            <el-form-item label="装置" label-position="right">
              <el-select style="width: 100%" v-model="form.deviceId">
                <el-option
                  v-for="it in zzData"
                  :value="it.id"
                  :label="it.deviceName"
                ></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template #fileSlot>
            <el-form-item label="隐患图片" prop="fileId">
              <ImgList :imgs="files"></ImgList>
            </el-form-item>
          </template>

          <template #zgqk>
            <el-row>
              <el-col :span="24"> 整改情况 </el-col>
              <el-col :span="12">
                <el-form-item label="治理资金" label-position="right">
                  <el-input
                    style="width: 100%"
                    v-model="form.hiddenManagingFunds"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="整改人" label-position="right">
                  <el-input
                    style="width: 100%"
                    v-model="form.rectificationUserName"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="整改时间" label-position="right">
                  <el-input
                    style="width: 100%"
                    v-model="form.hiddenCompleteTime"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="整改情况" label-position="right">
                  <el-input
                    style="width: 100%"
                    v-model="form.hiddenCompleteInfo"
                  >
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="整改图片" prop="fileId">
                  <ImgList :imgs="files2"></ImgList>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template #fhqk>
            <el-row>
              <el-col :span="24"> 复核情况 </el-col>
              <el-col :span="12">
                <el-form-item label="复核人" prop="fileId">
                  <el-input style="width: 100%" v-model="form.reviewUserName">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="复核时间" prop="fileId">
                  <el-input style="width: 100%" v-model="form.hiddenReviewTime">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="复核情况" prop="fileId">
                  <el-input style="width: 100%" v-model="form.hiddenReviewInfo">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </DialogVform>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import DialogVform from "@/components/dialogVform/index";
import formJson from "./components/options.json";
import { apis as APIS } from "@/api/yhpc/yhdj.js";
import { parseTime } from "@/utils/ruoyi.js";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";
import { deptTreeSelect, listUser } from "@/api/system/user";
import ImgList from "@/components/ImgList";
import { pushInvestigation } from "@/api/yhpc/push";

const { proxy } = getCurrentInstance();
const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});

const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    [
      "hiddenSource",
      "hiddenType",
      "hiddenLevel",
      "hiddenCheckType",
      "rectificationUserName",
      "hiddenCheckUser",
    ].includes(i.prop)
  ),
});
const files = ref([]);
const files2 = ref([]);
const showSearch = ref(true);
const dialogVform = ref();
const deptTree = ref([]);
const table = ref();
const plugEdit = (row) => {
  form.value.hiddenImageFileName = row.hiddenImageFileName;
  form.value.hiddenImageFileId = row.hiddenImageFileId;
  form.value.hiddenManagingFunds = row.hiddenManagingFunds;
  form.value.hiddenCompleteInfo = row.hiddenCompleteInfo;
  form.value.rectificationUserName = row.rectificationUserName;
  form.value.rectificationUserName = row.rectificationUserName;
  form.value.hiddenReviewInfo = row.hiddenReviewInfo;
  form.value.reviewUserName = row.reviewUserName;
  form.value.deviceName = row.deviceName;
  form.value.deviceId = row.deviceId;
  form.value.hiddenCompleteTime = row.hiddenCompleteTime;
  form.value.hiddenReviewTime = row.hiddenReviewTime;
  if (row.completeHiddenFileUrl) {
    files2.value = [
      {
        name: row.completeHiddenFileName,
        id: row.completeHiddenFileId,
        url: row.completeHiddenFileUrl,
      },
    ];
  }
  files.value = row.fileManageList;
};

const plugAdd = () => {
  return {
    hiddenCheckTime: parseTime(new Date()),
  };
};
const zzData = ref([]);
const getZzSelect = () => {
  APIS.zz().then((res) => {
    zzData.value = res.rows;
  });
};
const columnZz = (id) => {
  return zzData.value.find((item) => item.id == id)?.deviceName;
};
const {
  onSubmit,
  fetchData,
  handleEdit,
  getList,
  queryParams,
  form,
  handleExport,
} = useAsyncData({
  APIS: {
    ...APIS,
    query: APIS.queryAll,
  },
  formJson,
  dialogVform,
  table,
  proxy,
  plugEdit,
  plugAdd,
  filterForm: {
    hiddenProgress: "已完成",
  },
});

onMounted(() => {
  getZzSelect();
  deptTreeSelect().then((response) => {
    deptTree.value = response.data;
  });
});

const selectList = ref([]);
const selectionChange = (rows) => {
  selectList.value = rows;
};

const handlePush = () => {
  if (selectList.value.length == 0) {
    proxy.$modal.msgError("未选择数据");
    return;
  }
  pushInvestigation({
    ids: selectList.value.map((item) => item.id).join(","),
  }).then((res) => {
    if (res.msg.includes("成功")) {
      proxy.$modal.msgSuccess(res.msg);
    } else {
      proxy.$modal.msgError(res.msg);
    }
  });
};
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
